<div class="row justify-content-center">
  <div class="col-lg-12">
    <div class="container">
      <div class="row">
        <div class="col-lg-4">
          <h5>
            <%= t(".title") %>
          </h5>
          <p class="text-muted">
            <%= t(".description") %>
          </p>
        </div>
        <div class="col-lg-8">
          <%= form_with(model: @user, url: account_password_path, html: {method: :put}, local: true) do |f| %>
            <div class="form-group text-left">
              <%= f.label :current_password, t(".form.current_password") %>
              <%= f.password_field :current_password, id: "user_current_password", autocomplete: "off", required: "required", class: "form-control", class_for_error: "is-invalid" %>
              <%= f.error_message :current_password, class: "invalid-feedback" %>
            </div>

            <div class="form-group text-left">
              <%= f.label :password, t(".form.new_password") %>
              <%= f.password_field :password, id: "user_password", autocomplete: "new-password", required: "required", class: "form-control", class_for_error: "is-invalid" %>
              <%= f.error_message :password, class: "invalid-feedback" %>
            </div>

            <div class="form-group text-left">
              <%= f.label :password_confirmation, t(".form.confirm_new_password") %>
              <%= f.password_field :password_confirmation, id: "user_password_confirmation", autocomplete: "new-password", required: "required", class: "form-control", class_for_error: "is-invalid" %>
              <%= f.error_message :password_confirmation, class: "invalid-feedback" %>
            </div>

            <%= f.submit t(".form.submit"), class: "btn btn-block btn-primary" %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>
